<template>
    <div class="m-page">
        <m-header title="综合看板"></m-header>
        <div class="m-body">
            <m-row :gutter="20" class="first-floor">
                <m-col :span="12">
                    <m-box class="to-spot-check" title="采购分析">
                        <div>
                            <m-row :gutter="20" class="analysis">
                                <m-col :span="4">
                                    <dv-border-box-12 class="title">本年</dv-border-box-12>
                                </m-col>
                                <m-col :span="8">
                                    <dv-decoration-9>
                                        <m-row style="text-align: center;">
                                            <div>{{ analysisReport.yearRate }} %</div>
                                            <div>采购及时率</div>
                                        </m-row>
                                    </dv-decoration-9>
                                </m-col>
                                <m-col :span="8">
                                    <dv-decoration-9>
                                        <m-row style="text-align: center;">
                                            <div>{{ analysisReport.qualifiedYearRate }} %</div>
                                            <div>采购合格率</div>
                                        </m-row>
                                    </dv-decoration-9>
                                </m-col>
                            </m-row>
                            <m-row :gutter="20" class="analysis">
                                <m-col :span="4">
                                    <dv-border-box-12 class="title">本月</dv-border-box-12>
                                </m-col>
                                <m-col :span="8">
                                    <dv-decoration-9>
                                        <m-row style="text-align: center;">
                                            <div>{{ analysisReport.monthRate }} %</div>
                                            <div>采购及时率</div>
                                        </m-row>
                                    </dv-decoration-9>
                                </m-col>
                                <m-col :span="8">
                                    <dv-decoration-9>
                                        <m-row style="text-align: center;">
                                            <div>{{ analysisReport.timelyMonthRate }} %</div>
                                            <div>采购合格率</div>
                                        </m-row>
                                    </dv-decoration-9>
                                </m-col>
                            </m-row>
                        </div>
                    </m-box>
                </m-col>
                <m-col :span="12">
                    <m-box class="to-spot-check" title="采购分析">
                        <m-row :gutter="20" class="analysis">
                            <m-col :span="4">
                                <dv-border-box-12 class="title">本年</dv-border-box-12>
                            </m-col>
                            <m-col :span="16">
                                <m-row>
                                    <m-col :span="8">
                                        <m-num-board :color="'#FFF8DC'" :title="'工单总数'"
                                            :number="statisticsReport.totalYearQty" />
                                    </m-col>
                                    <m-col :span="8">
                                        <m-num-board :color="'#7FFF00'" :title="'未完工'"
                                            :number="statisticsReport.ongoingYearQty" />
                                    </m-col>
                                    <m-col :span="8">
                                        <m-num-board :color="'#00FFFF'" :title="'已完工'"
                                            :number="statisticsReport.ssYearQty" />
                                    </m-col>
                                </m-row>
                            </m-col>
                            <m-col :span="4">
                                <dv-decoration-9>
                                    <m-row style="text-align: center;">
                                        <div>{{ statisticsReport.yearRate }} %</div>
                                        <div>工单达成率</div>
                                    </m-row>
                                </dv-decoration-9>
                            </m-col>
                        </m-row>
                        <m-row :gutter="20" class="analysis">
                            <m-col :span="4">
                                <dv-border-box-12 class="title">本年</dv-border-box-12>
                            </m-col>
                            <m-col :span="16">
                                <m-row>
                                    <m-col :span="8">
                                        <m-num-board :color="'#FFF8DC'" :title="'工单总数'"
                                            :number="statisticsReport.moMonthQty" />
                                    </m-col>
                                    <m-col :span="8">
                                        <m-num-board :color="'#7FFF00'" :title="'未完工'"
                                            :number="statisticsReport.ongoingMonthQty" />
                                    </m-col>
                                    <m-col :span="8">
                                        <m-num-board :color="'#00FFFF'" :title="'已完工'"
                                            :number="statisticsReport.ssMonthQty" />
                                    </m-col>
                                </m-row>
                            </m-col>
                            <m-col :span="4">
                                <dv-decoration-9>
                                    <m-row style="text-align: center;">
                                        <div>{{ statisticsReport.monthRate }} %</div>
                                        <div>工单达成率</div>
                                    </m-row>
                                </dv-decoration-9>
                            </m-col>
                        </m-row>
                    </m-box>
                </m-col>
            </m-row>
            <m-row :gutter="20" class="second-floor">
                <m-col :span="12">
                    <m-box class="to-spot-check" title="品质">
                        <m-row>
                            <m-col :span="12">
                                <m-box>
                                    <div class="title">来料合格率</div>
                                    <div class="percent-pond">
                                        <dv-percent-pond
                                            :config="{ value: qualityReport.iqcMonthRate, colors: ['rgb(255, 248, 220)', 'rgb(193, 53, 255)'] }"
                                            style="width: 100%; height: 26px" />
                                    </div>
                                </m-box>
                            </m-col>
                            <m-col :span="12">
                                <m-box>
                                    <div class="title">成品合格率</div>
                                    <div class="percent-pond">
                                        <dv-percent-pond
                                            :config="{ value: qualityReport.oqcMonthRate, colors: ['rgb(255, 248, 220)', 'rgb(193, 53, 255)'] }"
                                            style="width: 100%; height: 26px" />
                                    </div>
                                </m-box>
                            </m-col>
                        </m-row>
                    </m-box>
                </m-col>
                <m-col :span="12">
                    <m-box class="to-spot-check" title="物料配套">
                        <m-row>
                            <m-col :span="12">
                                <m-box>
                                    <div class="title">工单齐套率</div>
                                    <div class="percent-pond">
                                        <dv-percent-pond
                                            :config="{ value: assembleAnalysisRateReport.moRate, colors: ['rgb(255, 248, 220)', 'rgb(193, 53, 255)'] }"
                                            style="width: 100%; height: 26px" />
                                    </div>
                                </m-box>
                            </m-col>
                            <m-col :span="12">
                                <m-box>
                                    <div class="title">发料及时率</div>
                                    <div class="percent-pond">
                                        <dv-percent-pond
                                            :config="{ value: assembleAnalysisRateReport.timelyIssuanceRate, colors: ['rgb(255, 248, 220)', 'rgb(193, 53, 255)'] }"
                                            style="width: 100%; height: 26px" />
                                    </div>
                                </m-box>
                            </m-col>
                        </m-row>
                    </m-box>
                </m-col>
            </m-row>
            <m-row :gutter="20" class="third-floor">
                <m-col :span="12">
                    <m-box title="仓库管理">
                        <m-row style="margin: 0">
                            <m-col :span="12">
                                <m-box>
                                    <num-board title="物料种类" :number="WMSReport.mitemQty"></num-board>
                                </m-box>
                            </m-col>
                            <m-col :span="12">
                                <m-box>
                                    <num-board title="成品库存" :number="WMSReport.finishedProductQty"></num-board>
                                </m-box>
                            </m-col>
                        </m-row>
                    </m-box>
                </m-col>
                <m-col :span="12">
                    <m-box title="设备管理">
                        <m-row>
                            <m-col :span="8">
                                <m-box>
                                    <num-board title="总数" :number="quipmentManageReport.totalQty"></num-board>
                                </m-box>
                            </m-col>
                            <m-col :span="8">
                                <m-box>
                                    <num-board title="运行数" :number="quipmentManageReport.runQty"></num-board>
                                </m-box>
                            </m-col>
                            <m-col :span="8">
                                <m-box>
                                    <num-board title="非运行数" :number="quipmentManageReport.noRunQty"></num-board>
                                </m-box>
                            </m-col>
                        </m-row>
                    </m-box>
                </m-col>
            </m-row>
        </div>
    </div>
</template>

<script setup>
import http from '@/utils/request'
import numBoard from './components/numBoard/index.vue'
import { ref, onBeforeMount } from 'vue'

// 获取生产分析
const analysisReportLoading = ref(false)
const analysisReport = ref({
    yearRate: 0, //本年：采购及时率
    qualifiedYearRate: 0, //本年：采购合格率
    monthRate: 0, //本月：采购及时率
    timelyMonthRate: 0 //本月：采购合格率
})
const geteProcurementAnalysisReport = async () => {
    try {
        analysisReportLoading.value = true
        const data = await http.get('v1/kanban/geteProcurementAnalysisReport');
        console.log("123", data)
        analysisReport.value = data;
        analysisReportLoading.value = false;
    } catch (error) {
        console.log(error);
        analysisReportLoading.value = false;
    }
}

// 获取生产管理
const statisticsReportLoading = ref(false)
const statisticsReport = ref({
    totalYearQty: 0, // 工单年数据
    moMonthQty: 0, // 工单月数据
    ongoingYearQty: 0, // 在产工单数年
    ongoingMonthQty: 0, // 在产工单数月
    ssYearQty: 0, // 当年完工工单数
    ssMonthQty: 0, // 当月完工工单数
    yearRate: 0, // 当年, 工单达成率
    monthRate: 0 // 当年, 工单达成率
})
const getMOProductionStatisticsReport = async () => {
    try {
        statisticsReportLoading.value = true
        const data = await http.get('v1/kanban/getMOProductionStatisticsReport');
        statisticsReport.value = data;
        statisticsReportLoading.value = false;
    } catch (error) {
        console.log(error);
        statisticsReportLoading.value = false;
    }
}

// 获取品质（检验时间为当月内）
const qualityReportLoading = ref(false)
const qualityReport = ref({
    iqcMonthRate: 0, // 来料合格率
    oqcMonthRate: 0 // 成品合格率
})
const getMOQualityReport = async () => {
    try {
        qualityReportLoading.value = true
        const data = await http.get('v1/kanban/GetMOQualityReport');
        qualityReport.value = data;
        qualityReportLoading.value = false;
    } catch (error) {
        console.log(error);
        qualityReportLoading.value = false;
    }
}

// 获取物料配套（统计已上线的工单）
const assembleAnalysisRateReportLoading = ref(false)
const assembleAnalysisRateReport = ref({
    moRate: 0, // 工单齐套率
    timelyIssuanceRate: 0 // 发料及时率
})
const getAssembleAnalysisRateReport = async () => {
    try {
        assembleAnalysisRateReportLoading.value = true
        const data = await http.get('v1/kanban/GetAssembleAnalysisRateReport');
        assembleAnalysisRateReport.value = data;
        console.log("66666666", data)
        assembleAnalysisRateReportLoading.value = false;
    } catch (error) {
        console.log(error);
        assembleAnalysisRateReportLoading.value = false;
    }
}

// 获取仓库管理（库存>0）
const WMSReportLoading = ref(false)
const WMSReport = ref({
    mitemQty: 0, // 物料种类
    finishedProductQty: 0 // 成品库存（成品仓）
})
const getWMSReport = async () => {
    try {
        WMSReportLoading.value = true
        const data = await http.get('v1/kanban/getWMSReport');
        WMSReport.value = data;
        WMSReportLoading.value = false;
    } catch (error) {
        console.log(error);
        WMSReportLoading.value = false;
    }
}

// 获取设备管理
const quipmentManageReportLoading = ref(false)
const quipmentManageReport = ref({
    totalQty: 0, // 总数
    runQty: 0, // 运行数
    noRunQty: 0 // 非运行数
})
const geteQuipmentManageReport = async () => {
    try {
        quipmentManageReportLoading.value = true
        const data = await http.get('v1/kanban/geteQuipmentManageReport');
        quipmentManageReport.value = data;
        quipmentManageReportLoading.value = false;
    } catch (error) {
        console.log(error);
        quipmentManageReportLoading.value = false;
    }
}


function init() {
    // 获取生产分析
    geteProcurementAnalysisReport();
    // 获取生产管理
    getMOProductionStatisticsReport();
    // 获取品质（检验时间为当月内）
    getMOQualityReport();
    // 获取物料配套（统计已上线的工单）
    getAssembleAnalysisRateReport();
    // 获取仓库管理（库存>0）
    getWMSReport();
    // 获取设备管理
    geteQuipmentManageReport();
}

onBeforeMount(async () => {
    init()
})
</script>
<style lang="less" scoped>
.m-page {
    .m-body {
        color: #FFFFFF;

        ::v-deep(.first-floor) {
            height: 100px;
            width: calc(100% - 30px);
            margin-left: 15px;

            .border-box-content {
                position: relative;

            }

            .analysis {
                display: flex;
                vertical-align: middle;
                align-items: center;
                justify-content: space-evenly;
                gap: 20px;
                margin-bottom: 20px;
                height: 100px;

                .m-col {
                    display: flex;
                    justify-content: space-evenly;
                }

                .dv-decoration-9 {
                    width: 180px;
                    height: 100px;
                }
            }

            .title {
                text-align: center;
                width: 100px;
                height: 50px;
                line-height: 50px;

            }

        }

        .third-floor>.m-col {
            height: 200px;
        }

    }
}
</style>